<{include file="Public/top_wzq.html" }>
<style>
.msgManager-msgList > li
{
  margin-bottom:15px;
}
.msgManager-msgContentContainer
{
  padding:15px;
  border:1px solid #e7e7eb;
}
.msgManager-msgReplyContainer
{
  padding:15px 30px;
  border:1px solid #e7e7eb;
}
.msgManager-msgContentContainer + .msgManager-msgReplyContainer
{
  border-top:none;
}
.msgManager-msgReplyInputArea {
  width: 100%;
  height: 205px;
  padding: 20px;
  display: block;
  border: none;
}
.msgManager-msgInfo
{
  margin-left:10px;
  display:inline-block; 
}
.msgManager-msgInfo > div:first-child
{
  margin-bottom:10px;
}
.msgManager-newMsgAlertBar
{
  background-color:#cdeefd;
  line-height:40px;
  text-align:center;
  margin-bottom:15px;
}
.msgManager-searchBar
{
  margin-bottom:15px; 
  line-height:30px;
}
.msgManager-searchBarElem
{
  margin-right:30px;
  display:inline-block;
}
.msgManager-searchBarElem > *
{
  margin-right:15px;  
}
</style>
<script>

require(["jquery","knockout","components/xy-tooltip","components/xy-emotion"],function($,ko,xyTooltip,xyEmotionPicker){
	$(function(){
		function viewModel(){
      var self = this;
      this.mouseOverHead = function(d,e){self.showUserInfo(d,e.target);};
      this.mouseOutHead = function(d,e){self.hideUserInfo();};
      this.click2ShowEmotionPicker = function(d,e){e.stopPropagation();self.toggleEmotionPicker(e.target,d.replyContent);};
      this.click2QuickReply = function(d,e){self.quickReply(d);};
      this.getNewMsgAlertTxt = function(c){return c+"条新消息";};
      this.addReplyContentProperty = function(ary)
      {
        var len = ary.length, elem;
        for(var i=0;i<len;i++)
        {
          ary[i].replyContent = ko.observable("");
          ary[i].replyContainerShow = ko.observable(false);
        }
      };

      
      this.setUserInfo = function(d){
        if(!this.tooltip)this.tooltip = new xyTooltip();
        var c = "<div style='margin-bottom:18px'>用户详情</div>" +
                "<div style='margin-bottom:10px'>用户昵称："+d.uNickName+"</div>" +
                "<div style='margin-bottom:10px'>用户姓名："+d.uName+"</div>" +
                "<div style='margin-bottom:10px'>备注："+d.uPS+"</div>" +
                "<div style='margin-bottom:10px'>手机号码："+d.uPhoneNum+"</div>" +
                "<div style='margin-bottom:10px'>会员等级："+d.uLv+"</div>" +
                "<div style='margin-bottom:10px'>积分："+d.uScore+"</div>" +
                "<div>消费总额："+d.consume+"</div>";
        this.tooltip.setContent(c);
      };
      
      this.showUserInfo = function(d,target){
        this.setUserInfo(d);
        this.tooltip.show(target);
      };
      
      this.hideUserInfo = function(){
        if(this.tooltip)
          this.tooltip.hide();
      };
      
      /** 使用以下两个方法需要引入js/xy-emotion.js及css/xy-emotion.css **/
      this.toggleEmotionPicker = function(target,bindValue){
          if(!this.emotionPicker)this.emotionPicker = new xyEmotionPicker();
          this.emotionPicker.toggle(target);
          if(bindValue)this.emotionPicker.bindValue = bindValue;
      };
      
      this.quickReply = function(d){
          var v = d.replyContent();
          if(v.length > 0)
          {
            d.replyContent("");
            d.replyState(1);
            this.showReplyContainer(d,false);
          }
      };
            //消息列表
			var msgListAry = [
				{"head":"img/someHead.png","author":"小臭脚1","contentType":0,"content":"合乎","time":"2015-3-3 13:00","replyState":ko.observable(1),"like":1,"uNickName":"小臭脚1","uName":"王周全","uPhoneNum":"13611111111","uPS":"这人是个傻逼","uLv":"1","uScore":"100","consume":"100"},
				{"head":"img/someHead.png","author":"小臭脚2","contentType":1,"time":"2015-3-3 13:00","replyState":ko.observable(0),"like":0,"uNickName":"小臭脚1","uName":"王周全","uPhoneNum":"13611111111","uPS":"这人是个傻逼","uLv":"1","uScore":"100","consume":"100"},
				{"head":"img/someHead.png","author":"小臭脚3","contentType":2,"content":"<{$preStaticUrl}>/Admin/img/someMsgImg.png","time":"2015-3-3 13:00","replyState":ko.observable(0),"like":1,"uNickName":"小臭脚1","uName":"王周全","uPhoneNum":"13611111111","uPS":"这人是个傻逼","uLv":"1","uScore":"100","consume":"100"}
			];
			this.addReplyContentProperty(msgListAry);
			this.msgListData = ko.observableArray(msgListAry);

            //收藏消息
			var favouriteAry = [
				{"head":"img/someHead.png","author":"小臭脚1","contentType":0,"content":"合乎","time":"2015-3-3 13:00","replyState":ko.observable(1),"uNickName":"小臭脚1","uName":"王周全","uPhoneNum":"13611111111","uPS":"这人是个傻逼","uLv":"1","uScore":"100","consume":"100"},
				{"head":"img/someHead.png","author":"小臭脚2","contentType":1,"time":"2015-3-3 13:00","replyState":ko.observable(0),"uNickName":"小臭脚1","uName":"王周全","uPhoneNum":"13611111111","uPS":"这人是个傻逼","uLv":"1","uScore":"100","consume":"100"},
				{"head":"img/someHead.png","author":"小臭脚3","contentType":2,"content":"<{$preStaticUrl}>/Admin/img/someMsgImg.png","time":"2015-3-3 13:00","replyState":ko.observable(0),"uNickName":"小臭脚1","uName":"王周全","uPhoneNum":"13611111111","uPS":"这人是个傻逼","uLv":"1","uScore":"100","consume":"100"}
			];
			this.addReplyContentProperty(favouriteAry);
			this.favouriteData = ko.observableArray(favouriteAry);

            //48小时交互列表
			var recentAry = [
				{"head":"img/someHead.png","author":"小臭脚1","contentType":0,"content":"合乎","time":"2015-3-3 13:00","replyState":ko.observable(1),"like":1,"uNickName":"小臭脚1","uName":"王周全","uPhoneNum":"13611111111","uPS":"这人是个傻逼","uLv":"1","uScore":"100","consume":"100"},
				{"head":"img/someHead.png","author":"小臭脚2","contentType":1,"time":"2015-3-3 13:00","replyState":ko.observable(0),"like":0,"uNickName":"小臭脚2","uName":"王周全","uPhoneNum":"13611111111","uPS":"这人是个傻逼","uLv":"1","uScore":"100","consume":"100"},
				{"head":"img/someHead.png","author":"小臭脚3","contentType":2,"content":"<{$preStaticUrl}>/Admin/img/someMsgImg.png","time":"2015-3-3 13:00","replyState":ko.observable(0),"like":1,"uNickName":"小臭脚3","uName":"王周全","uPhoneNum":"13611111111","uPS":"这人是个傻逼","uLv":"1","uScore":"100","consume":"100"}
			];
			this.addReplyContentProperty(recentAry);
			this.recentData     = ko.observableArray(recentAry);
			this.newMsgCount    = ko.observable(37);
			
		};
		
		ko.components.register('xy-navigator', { require: 'components/xy-navigator' });
		ko.applyBindings(new viewModel());
	});
});

</script>
</head>

<body>
<div class="xy-location">消息管理</div>
<div data-bind="component:{name:'xy-navigator', params:['消息列表','收藏消息', '48小时交互列表']}"></div>
<!-- 消息列表 -->
<div class="xy-nav-content current">
	<div class="msgManager-newMsgAlertBar">
  <span id="newMsgAlert" data-bind="text:getNewMsgAlertTxt(newMsgCount())"></span>
  <a class="blueText">点击查看</a>
</div>
<div class="msgManager-searchBar">
  <div class="msgManager-searchBarElem">
    <span>关键字</span>
    <input id="keywordInput" type="text" style="width:100px"/>
  </div>
  <div class="msgManager-searchBarElem">
    <span>状态</span>
    <select id="stateInput" style="width:90px">
      <option value="0">全部</option>
      <option value="1">状态1</option>
    </select>
  </div>
  <a class="xy-button">搜索</a>
</div>
<ul id="theList" class="msgManager-msgList" data-bind="foreach:msgListData">
  <li>
    <div class="xy-row msgManager-msgContentContainer">
      <div>
        <img id="head" style="vertical-align:top;" data-bind="attr:{src:head}, event:{mouseover: $parent.mouseOverHead, mouseout: $parent.mouseOutHead}"/>
        <div class="msgManager-msgInfo">
          <div id="author" data-bind="text:author"></div>
          <div id="content">
          	<!-- ko if: contentType==0 -->
            <span id="txtContent" class="grayText" data-bind="text:content"></span>
            <!-- /ko -->
            <!-- ko if: contentType==1 -->
            <img id="voiceContent" src="<{$preStaticUrl}>/Admin/img/voice.png"/>
            <!-- /ko -->
            <!-- ko if: contentType==2 -->
            <img id="imgContent" data-bind="attr:{src:content}"/>
            <!-- /ko -->
          </div>
        </div>
      </div>
      <div class="hAlignCenterDiv" id="msgTime" data-bind="text:time"></div>
      <div>
        <div data-bind="if:replyState()==0">
          <span class="orangeText">未回复</span>
          <a class="xy-button themeWhite widerBtn" style="margin-left:40px">无需回复</a>
        </div>
        <span class="grayText" data-bind="if:replyState()==1">已回复</span>
      </div>
      <div class="hAlignCenterDiv">
        <img src="<{$preStaticUrl}>/Admin/img/reply.png" data-bind="click:function(d,e){d.replyContainerShow(true);}"/>
        <img style="margin-left:25px" data-bind="attr:{src:like==1 ? '<{$preStaticUrl}>/Admin/img/orangeStar.png' : '<{$preStaticUrl}>/Admin/img/transparentStar.png'}"/>
      </div>
    </div>
    <!-- ko if: replyContainerShow -->
    <div class="msgManager-msgReplyContainer">
      <div class="xy-panel">
        <div class="xy-panelContent noPadding">
          <textarea class="msgManager-msgReplyInputArea" data-bind="textInput:replyContent"></textarea>
        </div>
        <div class="xy-panelBottom">
          <div class="xy-titlebar">
            <div class="xy-titlebar-left">
              <img src="<{$preStaticUrl}>/Admin/img/expressions.png" data-bind="click:$parent.click2ShowEmotionPicker"/>
            </div>
            <div class="xy-titlebar-right grayText" data-bind="text:'还可以输入'+(500-replyContent().length)+'字'"></div>
          </div>
        </div>
      </div>
      <div style="margin-top:20px">
        <a class="xy-button widerBtn" data-bind="click:$parent.click2QuickReply">发送</a>
        <a class="xy-button themeWhite widerBtn" style="margin-left:40px" data-bind="click:function(d,e){d.replyContainerShow(false);}">收起</a>
      </div>
    </div>
    <!-- /ko -->
  </li>
</ul>
</div>
<!-- 收藏消息 -->
<div class="xy-nav-content">
<div class="msgManager-newMsgAlertBar">
	<span id="newMsgAlert" data-bind="text:getNewMsgAlertTxt(newMsgCount())"></span>
    <a class="blueText">点击查看</a>
</div>
<div class="msgManager-searchBar">
	<div class="msgManager-searchBarElem">
    	<span>关键字</span>
        <input id="keywordInput" type="text" style="width:100px"/>
    </div>
    <div class="msgManager-searchBarElem">
    	<span>状态</span>
        <select id="stateInput" style="width:90px">
            <option value="0">全部</option>
            <option value="1">状态1</option>
        </select>
    </div>
    <a class="xy-button">搜索</a>
</div>
<ul id="theList" class="msgManager-msgList" data-bind="foreach:favouriteData">
	<li>
  	<div class="xy-row msgManager-msgContentContainer">
    <div>
                <img id="head" style="vertical-align:top;" data-bind="attr:{src:head}, event:{mouseover: $parent.mouseOverHead, mouseout: $parent.mouseOutHead}"/>
                <div class="msgManager-msgInfo">
                    <div id="author" data-bind="text:author"></div>
                    <div id="content">
                    		<!-- ko if: contentType==0 -->
                        <span id="txtContent" class="grayText" data-bind="text:content">文字消息</span>
                        <!-- /ko -->
                        <!-- ko if: contentType==1 -->
                        <img id="voiceContent" src="<{$preStaticUrl}>/Admin/img/voice.png"/>
                        <!-- /ko -->
                        <!-- ko if: contentType==2 -->
                        <img id="imgContent" data-bind="attr:{src:content}"/>
                        <!-- /ko -->
                    </div>
                </div>
        </div>
        
        <div class="hAlignCenterDiv" id="msgTime" data-bind="text:time"></div>
        
        <div>
        	<div data-bind="if:replyState()==0">
            	<span class="orangeText">未回复</span>
                <a class="xy-button themeWhite widerBtn" style="margin-left:40px">无需回复</a>
            </div>
            
            <span class="grayText" data-bind="if:replyState()==1">已回复</span>
        </div>
        
        <div class="hAlignCenterDiv">
        	<img src="<{$preStaticUrl}>/Admin/img/reply.png" data-bind="click:function(d,e){d.replyContainerShow(true);}"/>
            <img style="margin-left:25px" src="<{$preStaticUrl}>/Admin/img/orangeStar.png"/>
        </div>
    </div>
    <!-- ko if: replyContainerShow -->
    <div class="msgManager-msgReplyContainer">
      <div class="xy-panel">
        <div class="xy-panelContent noPadding">
          <textarea class="msgManager-msgReplyInputArea" data-bind="textInput:replyContent"></textarea>
        </div>
        <div class="xy-panelBottom">
          <div class="xy-titlebar">
            <div class="xy-titlebar-left">
              <img src="<{$preStaticUrl}>/Admin/img/expressions.png" data-bind="click:$parent.click2ShowEmotionPicker"/>
            </div>
            <div class="xy-titlebar-right grayText" data-bind="text:'还可以输入'+(500-replyContent().length)+'字'"></div>
          </div>
        </div>
      </div>
      <div style="margin-top:20px">
        <a class="xy-button widerBtn" data-bind="click:$parent.click2QuickReply">发送</a>
        <a class="xy-button themeWhite widerBtn" style="margin-left:40px" data-bind="click:function(d,e){d.replyContainerShow(false);}">收起</a>
      </div>
    </div>
    <!-- /ko -->
    </li>
</ul>
</div>

<!-- 48小时交互列表 -->
<div class="xy-nav-content">
<div class="msgManager-newMsgAlertBar">
  <span id="newMsgAlert" data-bind="text:getNewMsgAlertTxt(newMsgCount())"></span>
  <a class="blueText">点击查看</a>
</div>
<div class="msgManager-searchBar">
  <div class="msgManager-searchBarElem">
    <span>关键字</span>
    <input id="keywordInput" type="text" style="width:100px"/>
  </div>
  <div class="msgManager-searchBarElem">
    <span>状态</span>
    <select id="stateInput" style="width:90px">
      <option value="0">全部</option>
      <option value="1">状态1</option>
    </select>
  </div>
  <a class="xy-button">搜索</a>
</div>
<ul id="theList" class="msgManager-msgList" data-bind="foreach:recentData">
  <li>
    <div class="xy-row msgManager-msgContentContainer">
      <div>
        <img id="head" style="vertical-align:top;" data-bind="attr:{src:head}, event:{mouseover: $parent.mouseOverHead, mouseout: $parent.mouseOutHead}"/>
        <div class="msgManager-msgInfo">
          <div id="author" data-bind="text:author"></div>
          <div id="content">
          	<!-- ko if: contentType==0 -->
            <span id="txtContent" class="grayText" data-bind="text:content">文字消息</span>
            <!-- /ko -->
            <!-- ko if: contentType==1 -->
            <img id="voiceContent" src="<{$preStaticUrl}>/Admin/img/voice.png"/>
            <!-- /ko -->
            <!-- ko if: contentType==2 -->
            <img id="imgContent" data-bind="attr:{src:content}"/>
            <!-- /ko -->
          </div>
        </div>
      </div>
      <div class="hAlignCenterDiv" id="msgTime" data-bind="text:time"></div>
      <div>
        <div data-bind="if:replyState()==0">
          <span class="orangeText">未回复</span>
          <a class="xy-button themeWhite widerBtn" style="margin-left:40px">无需回复</a>
        </div>
        <span class="grayText" data-bind="if:replyState()==1">已回复</span>
      </div>
      <div class="hAlignCenterDiv">
        <img src="<{$preStaticUrl}>/Admin/img/reply.png" data-bind="click:function(d,e){d.replyContainerShow(true);}"/>
        <img style="margin-left:25px" data-bind="attr:{src:like==1 ? '<{$preStaticUrl}>/Admin/img/orangeStar.png' : '<{$preStaticUrl}>/Admin/img/transparentStar.png'}"/>
      </div>
    </div>
    <!-- ko if: replyContainerShow -->
    <div class="msgManager-msgReplyContainer">
      <div class="xy-panel">
        <div class="xy-panelContent noPadding">
          <textarea class="msgManager-msgReplyInputArea" data-bind="textInput:replyContent"></textarea>
        </div>
        <div class="xy-panelBottom">
          <div class="xy-titlebar">
            <div class="xy-titlebar-left">
              <img src="<{$preStaticUrl}>/Admin/img/expressions.png" data-bind="click:$parent.click2ShowEmotionPicker"/>
            </div>
            <div class="xy-titlebar-right grayText" data-bind="text:'还可以输入'+(500-replyContent().length)+'字'"></div>
          </div>
        </div>
      </div>
      <div style="margin-top:20px">
        <a class="xy-button widerBtn" data-bind="click:$parent.click2QuickReply">发送</a>
        <a class="xy-button themeWhite widerBtn" style="margin-left:40px" data-bind="click:function(d,e){d.replyContainerShow(false);}">收起</a>
      </div>
    </div>
    <!-- /ko -->
  </li>
</ul>
</div>

</body>
</html>
